function chartsBar1(id) {
  var chartDom = document.getElementById(id);
  var myChart = echarts.init(chartDom);
  var option;

  const data = [220, 182, 191, 234, 290, 330, 310, 175, 300];
  const sideData = data.map((item) => item + 4.5);

  option = {
    // backgroundColor: "#041730",
    tooltip: {
      trigger: "axis",
      formatter: "{b} : {c}",
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
      },
    },
    grid: {
      top: "3%",
      left: "3%",
      right: "14%",
      bottom: "4%",
      containLabel: true,
    },
    xAxis: {
      data: [
        "潇河",
        "唐槐",
        "学府",
        "武宿综保税",
        "阳曲",
        "科技创新城",
        "大学城",
        "晋中新能源汽车",
        "晋中汇通",
      ],
      //坐标轴
      axisLine: {
        lineStyle: {
          type: "dashed",
          color: "rgba(44, 104, 184, 0.6)",
        },
      },
      axisTick: {
        show: false,
      },
      //坐标值标注
      axisLabel: {
        show: true,
        interval: 0, // 显示所有标签
        rotate: 30, // 设置标签文字的旋转角度
        textStyle: {
          color: "#93C4E9",
        },
      },
    },
    yAxis: {
      //坐标轴
      axisLine: {
        show: true,
        lineStyle: {
          type: "dashed",
          color: "rgba(44, 104, 184, 0.6)",
        },
      },
      //坐标值标注
      axisLabel: {
        show: true,
        textStyle: {
          color: "#93C4E9",
        },
      },
      //分格线
      splitLine: {
        lineStyle: {
          type: "dashed",
          color: "rgba(44, 104, 184, 0.6)",
        },
      },
    },
    series: [
      {
        name: "a",
        tooltip: {
          // show: false,
        },
        type: "bar",
        barWidth: 10,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              1,
              0,
              0,
              [
                {
                  offset: 0,
                  color: "rgba(171, 235, 255, 1)", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "RGBA(20, 197, 255, 1)", // 100% 处的颜色
                },
              ],
              false
            ),
          },
        },
        data: data,
        barGap: 0,
      },
      // {
      //   type: "bar",
      //   barWidth: 8,
      //   itemStyle: {
      //     normal: {
      //       color: new echarts.graphic.LinearGradient(
      //         0,
      //         1,
      //         0,
      //         0,
      //         [
      //           {
      //             offset: 0,
      //             color: "#09337C", // 0% 处的颜色
      //           },
      //           {
      //             offset: 0.6,
      //             color: "#0761C0", // 60% 处的颜色
      //           },
      //           {
      //             offset: 1,
      //             color: "#0575DE", // 100% 处的颜色
      //           },
      //         ],
      //         false
      //       ),
      //     },
      //   },
      //   barGap: 0,
      //   data: sideData,
      // },
      {
        name: "b",
        tooltip: {
          show: false,
        },
        type: "pictorialBar",
        itemStyle: {
          color: "rgba(174, 235, 255, 1)",
        },
        symbol: "path://M 0,0 l 120,0 l -30,60 l -120,0 z",
        symbolSize: ["10", "6"],
        symbolOffset: ["0", "-2"],
        //symbolRotate: -5,
        symbolPosition: "end",
        data: data,
        z: 3,
      },
    ],
  };

  option && myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
}
function chartsBar2(id) {
  var chartDom = document.getElementById(id);
  var myChart = echarts.init(chartDom);
  var option;

  var data = {
    area: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
    legend: ["融资数据", "投资数据", "招商数据", "金融服务"],
    data: [
      [1320, 1302, 901, 634, 1390, 1330, 1320, 1000, 500, 40, 30, 20],
      [320, 302, 301, 334, 390, 330, 320, 100, 50, 40, 30, 20],
      [320, 302, 301, 334, 390, 330, 320, 100, 50, 40, 30, 20],
      [320, 302, 301, 334, 390, 330, 320, 100, 50, 40, 30, 20],
      [320, 302, 301, 334, 390, 330, 320, 100, 50, 40, 30, 20],
      [320, 302, 301, 334, 390, 330, 320, 100, 50, 40, 30, 20],
      [320, 302, 301, 334, 390, 330, 320, 100, 50, 40, 30, 20],
      [320, 302, 301, 334, 390, 330, 320, 100, 50, 40, 30, 20],
    ],
  };
  var colors = [
    "#4C98FB",
    "#83CCE7",
    "#26C7C8",
    "#73DEBD",
    "#26C978",
    "#8CDF6C",
    "#FBD657",
    "#F56679",
    "#E07BCE",
    "#9D50E0",
    "#634FDA",
  ];
  var option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "line",
        lineStyle: {
          opacity: 0,
        },
      },
    },
    color: colors,
    legend: {
      top: 10,
      left: "0",
      itemWidth: 10,
      itemHeight: 10,
      // padding: [5, 10],
      textStyle: {
        fontSize: 14,
        color: "#96A4F4",
        padding: [3, 0, 0, 0],
      },
      data: data.legend,
    },
    grid: {
      left: "3%",
      right: "14%",
      bottom: "4%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      axisLabel: {
        color: "#96A4F4",
      },
      axisLine: {
        lineStyle: {
          color: "#96A4F4",
        },
        width: 5,
      },
      axisTick: {
        show: false,
      },
      data: data.area,
    },
    yAxis: {
      type: "value",
      axisLabel: {
        color: "#96A4F4",
      },
      axisLine: {
        lineStyle: {
          color: "#96A4F4",
        },
        width: 5,
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        lineStyle: {
          color: "rgba(150, 164, 244, 0.3)",
        },
      },
    },
    series: [],
  };
  for (var i = 0; i < data.legend.length; i++) {
    option.series.push({
      name: data.legend[i],
      type: "bar",
      stack: "总量",
      barWidth: "45%",
      label: {
        show: false,
        position: "insideRight",
      },
      data: data.data[i],
    });
  }
  myChart.setOption(option);

  option && myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
}

// 中间底部
function chartsLine1(id) {
  var chartDom = document.getElementById(id);
  var myChart = echarts.init(chartDom);
  var option;

  var xData = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"];
  var series = [
    {
      name: "X16",
      type: "line",
      symbolSize: 5,
      symbol: "circle",
      itemStyle: {
        color: "#0090FF",
        borderColor: "rgba(255,255,255,.4)",
        borderWidth: 2,
      },
      data: [10, 36, 29, 38, 25, 19, 17, 38, 25, 19, 17, 25],
    },
  ];
  option = {
    title: {
      x: "4%",
      show: false,
      textStyle: {
        color: "#fff",
        fontSize: "22",
      },
      subtextStyle: {
        color: "#90979c",
        fontSize: "16",
      },
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
        textStyle: {
          color: "#fff",
        },
      },
    },
    grid: {
      left: "10",
      right: "26",
      bottom: "0",
      top: "40",
      containLabel: true,
    },
    legend: {
      show: true,
      left: "center",
      top: "0",
      itemWidth: 16,
      itemHeight: 8,
      itemStyle: {
        borderWidth: 0,
      },
      textStyle: {
        color: "#F0F0F0",
        fontSize: 12,
      },
    },

    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        axisLine: {
          lineStyle: {
            color: "rgba(255,255,255,.4)",
          },
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitArea: {
          show: false,
        },
        axisLabel: {
          interval: 0,
        },
        name: "m",
        nameGap: 8,
        nameTextStyle: {
          fontSize: 12,
          color: "#F0F0F0",
          // padding: [0, -50],
          align: "left",
        },
        data: xData,
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "位移量/mm",
        nameGap: 15,
        nameTextStyle: {
          fontSize: 12,
          color: "#F0F0F0",
          padding: [0, -16],
          align: "left",
        },
        splitLine: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "rgba(255,255,255,.4)",
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          interval: 0,
        },
        splitLine: {
          lineStyle: {
            color: "rgba(255,255,255,.3)",
            type: "dashed",
          },
        },
        splitArea: {
          show: false,
        },
      },
    ],

    series: series,
  };

  option && myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
}
// 右侧底部
function chartsLine2(id) {
  var chartDom = document.getElementById(id);
  var myChart = echarts.init(chartDom);
  var option;

  var xData = [];
  var series = [];
  option = {
    title: {
      x: "4%",
      show: false,
      textStyle: {
        color: "#fff",
        fontSize: "22",
      },
      subtextStyle: {
        color: "#90979c",
        fontSize: "16",
      },
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
        textStyle: {
          color: "#fff",
        },
      },
    },
    grid: {
      left: "10",
      right: "26",
      bottom: "0",
      top: "40",
      containLabel: true,
    },
    legend: {
      show: true,
      left: "center",
      top: "0",
      itemWidth: 16,
      itemHeight: 8,
      itemStyle: {
        borderWidth: 0,
      },
      textStyle: {
        color: "#F0F0F0",
        fontSize: 12,
      },
    },

    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        axisLine: {
          lineStyle: {
            color: "rgba(255,255,255,.4)",
          },
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitArea: {
          show: false,
        },
        axisLabel: {
          interval: 0,
        },
        // name: "m",
        // nameGap: 8,
        // nameTextStyle: {
        //   fontSize: 12,
        //   color: "#F0F0F0",
        //   // padding: [0, -50],
        //   align: "left",
        // },
        data: xData,
      },
    ],
    yAxis: [
      {
        min: 10,
        max: 100,
        type: "value",
        // name: "位移量/mm",
        // nameGap: 15,
        // nameTextStyle: {
        //   fontSize: 12,
        //   color: "#F0F0F0",
        //   padding: [0, -16],
        //   align: "left",
        // },
        splitLine: {
          show: false,
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: "rgba(255,255,255,.4)",
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: false,
          interval: 0,
        },
        splitLine: {
          lineStyle: {
            color: "rgba(255,255,255,.3)",
            type: "dashed",
          },
        },
        splitArea: {
          show: false,
        },
      },
    ],

    series: series,
  };

  option && myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
}

function chartsBar3(id) {
  var chartDom = document.getElementById(id);
  var myChart = echarts.init(chartDom);
  var option;

  var salvProName = [
    "电话打出意向",
    "朋友介绍意向",
    "客户介绍的商机",
    "展会挖掘的商机",
    "招标网站/线上渠道",
    "二次开发",
  ];
  var salvProValue = [50, 26.27, 20, 40, 55, 16, 74, 72, 67, 55];
  var salvProMax = [100, 100, 100, 100, 100, 100, 100]; //背景按最大值
  //   for (let i = 0; i < salvProValue.length; i++) {
  //     salvProMax.push(salvProValue[0]);
  //   }
  option = {
    grid: {
      left: "2%",
      right: "21%",
      bottom: "2%",
      top: "2%",
      containLabel: true,
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "none",
      },
      formatter: function (params) {
        return params[0].name + " : " + params[0].value;
      },
    },
    xAxis: {
      show: false,
      type: "value",
      max: 100,
    },
    yAxis: [
      {
        type: "category",
        inverse: true,

        axisLabel: {
          show: true,
          textStyle: {
            color: "#fff",
          },
        },

        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        data: salvProName,
      },
    ],
    series: [
      {
        name: "值",
        type: "bar",
        zlevel: 1,
        itemStyle: {
          normal: {
            barBorderRadius: 30,
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              {
                offset: 0,
                color: "rgb(4, 137, 236)",
              },
              {
                offset: 1,
                color: "rgb(4, 137, 236)",
              },
            ]),
          },
        },
        label: {
          normal: {
            show: true,
            position: "insideRight",
            formatter: "{c}%",
            color: "#fff",
          },
        },
        barWidth: 20,
        data: salvProValue,
      },
      {
        name: "背景",
        type: "bar",
        barWidth: 20,
        barGap: "-100%",
        data: salvProMax,
        itemStyle: {
          normal: {
            color: "#fff",
            barBorderRadius: 30,
          },
        },
      },
    ],
  };

  option && myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
}
// 左边
function chartsLine3(id) {
  var chartDom = document.getElementById(id);
  var myChart = echarts.init(chartDom);
  var option;

  var xData = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"];
  var series = [
    {
      name: "X16",
      type: "line",
      symbolSize: 5,
      symbol: "circle",
      itemStyle: {
        color: "#0090FF",
        borderColor: "rgba(255,255,255,.4)",
        borderWidth: 2,
      },
      data: [10, 36, 29, 38, 25, 19, 17, 38, 25, 19, 17, 25],
    },
  ];
  option = {
    title: {
      x: "4%",
      show: false,
      textStyle: {
        color: "#fff",
        fontSize: "22",
      },
      subtextStyle: {
        color: "#90979c",
        fontSize: "16",
      },
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
        textStyle: {
          color: "#fff",
        },
      },
    },
    grid: {
      left: "10",
      right: "26",
      bottom: "0",
      top: "40",
      containLabel: true,
    },
    legend: {
      show: true,
      left: "center",
      top: "0",
      itemWidth: 16,
      itemHeight: 8,
      itemStyle: {
        borderWidth: 0,
      },
      textStyle: {
        color: "#F0F0F0",
        fontSize: 12,
      },
    },

    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        axisLine: {
          lineStyle: {
            color: "rgba(255,255,255,.4)",
          },
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitArea: {
          show: false,
        },
        axisLabel: {
          interval: 0,
        },
        name: "m",
        nameGap: 8,
        nameTextStyle: {
          fontSize: 12,
          color: "#F0F0F0",
          // padding: [0, -50],
          align: "left",
        },
        data: xData,
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "位移量/mm",
        nameGap: 15,
        nameTextStyle: {
          fontSize: 12,
          color: "#F0F0F0",
          padding: [0, -16],
          align: "left",
        },
        splitLine: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "rgba(255,255,255,.4)",
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          interval: 0,
        },
        splitLine: {
          lineStyle: {
            color: "rgba(255,255,255,.3)",
            type: "dashed",
          },
        },
        splitArea: {
          show: false,
        },
      },
    ],

    series: series,
  };

  option && myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
}
function chartsLine4(id) {
  var chartDom = document.getElementById(id);
  var myChart = echarts.init(chartDom);
  var option;

  var xData = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"];
  var series = [
    {
      name: "X6",
      type: "line",
      symbolSize: 5,
      symbol: "circle",
      showSymbol: false,
      lineStyle: {
        color: "rgba(2, 243, 207, 1)",
        width: 1,
      },
      itemStyle: {
        color: "rgba(2, 243, 207, 1)",
      },
      areaStyle: {
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: `rgba(2, 243, 207, 0.5)`, // 0% 处的颜色
            },
            {
              offset: 1,
              color: `rgba(2, 243, 207, 0)`, // 100% 处的颜色
            },
          ],
          global: false, // 缺省为 false
        },
      },
      data: [10, 36, 29, 38, 25, 19, 17, 38, 25, 19, 17, 25],
    },
    {
      name: "X7",
      type: "line",
      symbolSize: 5,
      symbol: "circle",
      showSymbol: false,
      lineStyle: {
        color: "rgba(249, 99, 101, 1)",
        width: 1,
      },
      itemStyle: {
        color: "rgba(249, 99, 101, 1)",
      },
      areaStyle: {
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: `rgba(249, 99, 101, 0.5)`, // 0% 处的颜色
            },
            {
              offset: 1,
              color: `rgba(249, 99, 101, 0)`, // 100% 处的颜色
            },
          ],
          global: false, // 缺省为 false
        },
      },
      data: [40, 26, 19, 18, 15, 15, 10, 30, 20, 10, 10, 20],
    },
  ];
  option = {
    title: {
      x: "4%",
      show: false,
      textStyle: {
        color: "#fff",
        fontSize: "22",
      },
      subtextStyle: {
        color: "#90979c",
        fontSize: "16",
      },
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
        textStyle: {
          color: "#fff",
        },
      },
    },
    grid: {
      left: "10",
      right: "26",
      bottom: "0",
      top: "40",
      containLabel: true,
    },
    legend: {
      show: true,
      left: "center",
      top: "0",
      itemWidth: 16,
      itemHeight: 8,
      itemStyle: {
        borderWidth: 0,
      },
      textStyle: {
        color: "#F0F0F0",
        fontSize: 12,
      },
    },

    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        axisLine: {
          lineStyle: {
            color: "rgba(255,255,255,.4)",
          },
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitArea: {
          show: false,
        },
        axisLabel: {
          interval: 0,
        },
        name: "m",
        nameGap: 8,
        nameTextStyle: {
          fontSize: 12,
          color: "#F0F0F0",
          // padding: [0, -50],
          align: "left",
        },
        data: xData,
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "位移量/mm",
        nameGap: 15,
        nameTextStyle: {
          fontSize: 12,
          color: "#F0F0F0",
          padding: [0, -16],
          align: "left",
        },
        splitLine: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "rgba(255,255,255,.4)",
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          interval: 0,
        },
        splitLine: {
          lineStyle: {
            color: "rgba(255,255,255,.3)",
            type: "dashed",
          },
        },
        splitArea: {
          show: false,
        },
      },
    ],

    series: series,
  };

  option && myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
}
function chartsLine5(id) {
  var chartDom = document.getElementById(id);
  var myChart = echarts.init(chartDom);
  var option;

  var xData = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"];
  var series = [
    {
      name: "X8",
      type: "line",
      symbolSize: 5,
      symbol: "circle",
      itemStyle: {
        color: "#00FDD1",
        borderColor: "rgba(255,255,255,.4)",
        borderWidth: 2,
      },
      areaStyle: {
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: `rgba(0, 167, 255, 0.5)`, // 0% 处的颜色
            },
            {
              offset: 1,
              color: `rgba(0, 167, 255, 0)`, // 100% 处的颜色
            },
          ],
          global: false, // 缺省为 false
        },
      },
      data: [10, 36, 29, 38, 25, 19, 17, 38, 25, 19, 17, 25],
    },
    {
      name: "X9",
      type: "line",
      symbolSize: 5,
      symbol: "circle",
      itemStyle: {
        color: "#00A7FF",
        borderColor: "rgba(255,255,255,.4)",
        borderWidth: 2,
      },
      areaStyle: {
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: `rgba(0, 167, 255, 0.5)`, // 0% 处的颜色
            },
            {
              offset: 1,
              color: `rgba(0, 167, 255, 0)`, // 100% 处的颜色
            },
          ],
          global: false, // 缺省为 false
        },
      },
      data: [40, 26, 19, 18, 15, 15, 10, 30, 20, 10, 10, 20],
    },
  ];
  option = {
    title: {
      x: "4%",
      show: false,
      textStyle: {
        color: "#fff",
        fontSize: "22",
      },
      subtextStyle: {
        color: "#90979c",
        fontSize: "16",
      },
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
        textStyle: {
          color: "#fff",
        },
      },
    },
    grid: {
      left: "10",
      right: "26",
      bottom: "0",
      top: "40",
      containLabel: true,
    },
    legend: {
      show: true,
      left: "center",
      top: "0",
      itemWidth: 16,
      itemHeight: 8,
      itemStyle: {
        borderWidth: 0,
      },
      textStyle: {
        color: "#F0F0F0",
        fontSize: 12,
      },
    },

    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        axisLine: {
          lineStyle: {
            color: "rgba(255,255,255,.4)",
          },
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitArea: {
          show: false,
        },
        axisLabel: {
          interval: 0,
        },
        name: "m",
        nameGap: 8,
        nameTextStyle: {
          fontSize: 12,
          color: "#F0F0F0",
          // padding: [0, -50],
          align: "left",
        },
        data: xData,
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "位移量/mm",
        nameGap: 15,
        nameTextStyle: {
          fontSize: 12,
          color: "#F0F0F0",
          padding: [0, -16],
          align: "left",
        },
        splitLine: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "rgba(255,255,255,.4)",
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          interval: 0,
        },
        splitLine: {
          lineStyle: {
            color: "rgba(255,255,255,.3)",
            type: "dashed",
          },
        },
        splitArea: {
          show: false,
        },
      },
    ],

    series: series,
  };

  option && myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
}

//
function chartsBar(id) {
  var dataObj = {
    title: "",
    xdata: ["6月", "7月", "8月", "9月", "10月", "11月", "12月"],
    yname: ["检查人次", "检验人次"],
    ydata1: [3500, 3500, 3500, 3500, 3500, 3500, 3500],
    ydata2: [2200, 2200, 2200, 2200, 2200, 2200, 2200],
  };
  var color = ["52, 195, 255", "255, 210, 89"];
  var chartDom = document.getElementById(id);
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    // backgroundColor: "#041730",
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "none",
      },
      textStyle: {
        fontSize: 14,
      },
    },
    legend: {
      show: true,
      left: "center",
      top: 10,
      itemWidth: 8,
      itemHeight: 8,
      itemGap: 20,
      textStyle: {
        color: "#fff",
        fontSize: 14,
        padding: [0, 10],
      },
      icon: "circle",
    },
    grid: {
      left: "0",
      right: "20",
      top: "40",
      bottom: "0",
      containLabel: true,
    },
    xAxis: {
      boundaryGap: true,
      axisLine: {
        lineStyle: {
          color: "rgba(187, 197, 207, 0.4)",
          width: 1,
        },
      },
      axisTick: {
        show: false,
        length: 8,
        lineStyle: {
          color: "rgba(187, 197, 207, 0.4)",
          width: 2,
        },
      },
      splitLine: {
        lineStyle: {
          color: "rgba(187, 197, 207, 0.4)",
          width: 1,
        },
      },
      axisLabel: {
        fontSize: 14,
        color: "#fff",
        interval: 0,
        // margin: 20,
      },
      data: dataObj.xdata,
    },
    yAxis: [
      {
        name: "单位：人次",
        nameGap: 10,
        nameTextStyle: {
          fontSize: 14,
          color: "#B3BDC7",
          // padding: [0, -50],
          align: "left",
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "rgba(187, 197, 207, 0.4)",
            width: 1,
          },
        },
        splitLine: {
          lineStyle: {
            color: "rgba(187, 197, 207, 0.4)",
            width: 1,
          },
        },
        axisLabel: {
          fontSize: 14,
          color: "#BBC5CF",
          // margin: 20,
        },
      },
    ],
    series: [
      {
        name: dataObj.yname[0],
        type: "bar",
        data: dataObj.ydata1,
        itemStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0, //1右
            y2: 1, //1下
            colorStops: [
              {
                offset: 0,
                color: `rgba(${color[0]}, 0.8)`, // 0% 处的颜色
              },
              {
                offset: 1,
                color: `rgba(${color[0]}, 0)`, // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
          borderWidth: 1,
          borderColor: `rgba(${color[0]}, 1)`,
        },
        barWidth: 12,
      },
      {
        name: dataObj.yname[1],
        type: "bar",
        data: dataObj.ydata2,
        itemStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0, //1右
            y2: 1, //1下
            colorStops: [
              {
                offset: 0,
                color: `rgba(${color[1]}, 0.8)`, // 0% 处的颜色
              },
              {
                offset: 1,
                color: `rgba(${color[1]}, 0)`, // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
          borderWidth: 1,
          borderColor: `rgba(${color[1]}, 1)`,
        },
        barWidth: 12,
      },
    ],
  };

  option && myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
}
